<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  <title>Map</title>
</head>

<body style="margin:0">
  <div id="ffmap" style="position:relative; width:100%; height:640px;"></div>
  <script type="text/javascript">

    var INFINITE = 99.99;

    var map = L.map('ffmap').setView([52.48, 12], 13);

    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm = new L.TileLayer(osmUrl, { attribution: osmAttrib });
    map.addLayer(osm);

    var alias = new Array;
    var points = new Array;
    var unkpos = new Array;
    var lineid = 0;
    onload = new Function("if(null!=window.ffmapinit)ffmapinit();");

    function Mid(mainip, aliasip) {
      alias[aliasip] = mainip;
    }

    function Node(mainip, lat, lon, ishna, hnaip, name) {
      points[mainip] = [lat, lon];
      var marker = L.circleMarker([lat, lon]).addTo(map);
      marker.bindPopup(
        'Node: ' + name
        +
        '<br>IP: ' + mainip
        + '<br>DefGW: ' + hnaip
      );
    }

    function Self(mainip, lat, lon, ishna, hnaip, name) {
      Node(mainip, lat, lon, ishna, hnaip, name);
      map.setView([lat, lon], 13)
    }

    function Link(fromip, toip, lq, nlq, etx) {
      if (0 == lineid && null != window.ffmapstatic) ffmapstatic();
      if (null != alias[toip]) toip = alias[toip];
      if (null != alias[fromip]) fromip = alias[fromip];
      if (null != points[fromip] && null != points[toip]) {
        var color;
        var red = 240;
        var green = 0;
        var blue = 0;
        var w = 1

        if (etx < 100) { red = 252; green = 102; blue = 0; w = 2 };
        if (etx < 10) { red = 255; green = 203; blue = 5; w = 3 };
        if (etx < 4) { red = 240; green = 255; blue = 0; w = 4 };
        if (etx < 2) { red = 0; green = 204; blue = 0; w = 5 };
        if (etx < 1) { red = 80; green = 0; blue = 0; w = 1 };
        var polyline = L.polyline([points[fromip], points[toip]], {
          color:
            'rgb(' + red + ', ' + green + ', ' + blue + ')'
        })
          .addTo(map);
        polyline.bindPopup(
          fromip + " - " + toip + "<br>"
          + "ETX: " + etx + "<br>"
          + "LQ: " + lq + "<br>"
          + "NLQ: " + nlq + "<br>"
        );


      }
      else {
        if (null == points[toip]) unkpos[toip] = '';
        if (null == points[fromip]) unkpos[fromip] = '';
      }
      lineid++;
    }

    function PLink(fromip, toip, lq, nlq, etx, lata, lona, ishnaa, latb, lonb, ishnab) {
      Link(fromip, toip, lq, nlq, etx);
    }

    function ffmapinit() {
      var xhttp = new XMLHttpRequest();
      xhttp.open("POST", "/ubus/?" + Date.now(), true);
      xhttp.setRequestHeader("Content-Type", "application/json");
      xhttp.onload = () => {
        if (xhttp.status >= 200 && xhttp.status < 300) {
          // parse JSON and 
          const response = JSON.parse(xhttp.responseText);
          response[0].result[1].data.split(/\n/).forEach((line) => {
            eval(line);
          })
        } else {
          console.log("error getting latlon data from router")
        }

      };
      var data = [{ "jsonrpc": "2.0", "id": 1, "method": "call", "params": ["00000000000000000000000000000000", "ffmap", "getdata", {}] }];
      xhttp.send(JSON.stringify(data));
    }

  </script>
</body>

</html>